<template>
    <div class="adduser">
        <el-card>
            <div class="content">
                <div class="avatar-wrap">
                    <div>添加头像</div>
                    <el-upload
                        :on-success="uploadOK"
                        class="avatar-uploader"
                        action="http://localhost:3000/user/avatar/add"
                        :show-file-list="false">
                        <img v-if="currentImgUrl" :src="`http://localhost:3000/images/upload/${currentImgUrl}`" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div class="form-item">
                    <div>请输入用户名*</div>
                    <el-input v-model="userName" placeholder="请输入用户名"></el-input>
                </div>
                <div class="form-item">
                    <div>请输入邮箱*</div>
                    <el-input v-model="email" placeholder="请输入邮箱"></el-input>
                </div>
                <div class="form-item">
                    <div>请输入密码*</div>
                    <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
                </div>
                <div class="form-item">
                    <div>请选择权限*</div>
                    <el-select v-model="role" placeholder="请选择">
                        <el-option
                            v-for="item in roleSelect"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="form-item">
                    <el-button @click="checkForm" type="primary">确认创建</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://localhost:3000';

        // 当前预览头像
        const currentImgUrl = ref('default.jpg');
        // 用户名
        const userName = ref('');
        // 邮箱
        const email = ref('');
        // 密码
        const password = ref('');
        // 权限选择
        const roleSelect = ref(['普通用户', '超级管理员']);
        // 当前选中的权限
        const role = ref('');


        // 上传头像
        const uploadOK = function (response) {
            if (response.status != 200)
                return context.parent.$message.error('上传头像失败，请刷新后重试');
            context.parent.$message.success('上传头像成功');
            currentImgUrl.value = response.path;
        }

         // 用户名验证规则
        let checkUserName = /^[\u4e00-\u9fa5]{3,10}$/i;
        // 密码验证规则
        let checkPassword = /^[a-zA-Z0-9]{5,18}$/i;
        // 邮箱验证规则
        let checkEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

        // 验证表单
        const checkForm = function () {
            // 用户名
            if (!checkUserName.test(userName.value))
                return context.parent.$message.error('用户名只能是中文，长度3~10');
            // 邮箱
            if (!checkEmail.test(email.value))
                return context.parent.$message.error('邮箱格式错误，请重新输入');
            // 密码
            if (!checkPassword.test(password.value))
                return context.parent.$message.error('密码只能是数字、字母，长度5~18');
            if (role.value === '')
                return context.parent.$message.error('请选择用户的权限');

            submitForm();
        }

        // 提交表单
        const submitForm = async function () {
            role.value = role.value == '普通用户' ? 'normal' : 'admin';
            const response = {
                avatar: currentImgUrl.value,
                userName: userName.value,
                email: email.value,
                password: password.value,
                role: role.value
            }
            let { data: res } = await axios.post('/user/adduser', response);
            if (res.status != 200)
                return context.parent.$message.error(res.msg);

            context.parent.$message.success(res.msg);
            setTimeout(() => {
                location.reload();
            }, 1800);
        }

        const methods = { uploadOK, checkForm }
        return {
            ...methods,
            currentImgUrl,
            userName,
            email,
            password,
            roleSelect,
            role
        }
    }
}
</script>

<style lang="less" scoped>
.avatar-wrap {
    text-align: center;
    div {
        font-size: 14px;
        font-weight: 700;
        color: #4b4b4b;
        margin-bottom: 10px;
    }
}
.content {
    width: 600px;
    margin: 0 auto;
}
.form-item {
    margin: 12px 0;
    div {
        font-size: 14px;
        font-weight: 700;
        color: #4b4b4b;
        margin-bottom: 10px;
    }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>